<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{../layui/css/layui.css}">
</head>
<body>
<div style="width: 500px;height: 200px;margin: 0 auto;">
    <table class="layui-hide" id="table" style="table-layout: fixed;width: 100%" lay-filter="bigtable"></table>
</div>
<script type="text/javascript" th:src="@{../layui/layui.all.js}"></script>
<script type="text/javascript" th:src="@{../jq/jquery-3.4.1.min.js}"></script>
<script  type="text/javascript" th:inline="none">
    var page = 1, limit = 3;
    $(function () {
        getTableList(page, limit);
    })

    function getTableList(page, limit) {
        $.ajax({
            url: ' /sell/buyer/product/findByPaging',
            type: 'POST',
            async: true,
            data: {
                page: page,
                limit: limit,
            },
            success: function (data) {
                console.log(data)
                initTable(data);
            },
            error: function (e) {
                console.log(e)
            }
        })
    }

    function initTable(res) {
        layui.use('table', function () {
            var table = layui.table;
            table.render({
                elem: "#table",
                theme: '#FF5722',
                cols: [[
                    {field: 'productId', title: 'ID', width: '33%', align: 'center', sort: true}
                    , {field: 'productName', title: '产品名称', align: 'center', width: '33%'}
                    , {field: 'productPrice', title: '产品价格', width: '33%', align: 'center', sort: true}
                ]],
                height: 200,
                // // url: ' /sell/buyer/product/findByPaging',
                 count: 4,
                // pages: 11,
                data: res.data,
                limit : 4,
                page:true,
                // // limits:[5, 10, 20, 30, 40],
                // layout: [ 'prev', 'page', 'next'] //自定义分页布局
                // ,prev: '上一页' //设定初始在第 1 页
                // // ,cur:res.pages||1
                // ,next: '下一页' //设定初始在第 1 页
                // ,groups: 5 //只显示 1 个连续页码
                // // page:{
                // //     layout: [ 'prev', 'page', 'next'] //自定义分页布局
                // //     ,prev: '上一页' //设定初始在第 1 页
                // //     // ,cur:res.pages||1
                // //     ,next: '下一页' //设定初始在第 1 页
                // //     ,groups: 5 //只显示 1 个连续页码
                // // },
                jump: function (obj, first) {
                    if (!first) {
                        page = obj.curr;
                        limit = obj.limit;
                        getTableList(page, limit)
                    }
                },

                done: function () {
                    tdTitle();
                },

            });
            table.on('row(bigtable)', function (obj) {
                $tr = obj.tr;
                $tr.css('border', '1px solid #199ed8');
            })
        })
    }

    function tdTitle() {
        $('th').each(function (index, ele) {
            $(ele).attr('title', $(ele).text())
        })
        $('td').each(function (index, ele) {
            $(ele).attr('title', $(ele).text())
        })
    }
</script>

</body>
</html>